<template>
<el-row
    v-loading="isLoading">
  添加数据：<i class="el-icon-loading" v-if="isLoading"></i>
  <input
      type="file"
      accept=".json"
      @click="e.target.value=''"
      v-on:change="addJsonFile" ></input>
  <el-button @click="updateFeatureList">更新列表</el-button>
  <el-tree
      :props="props"
      :load="loadNode"
      lazy
      @check-change="handleCheckChange"
      :data="data"
      :render-content="renderContent"
  >
  </el-tree>
  <el-dialog :title="dialogData.title" :visible.sync="dialogData.dialogTableVisible">
    <el-input

        type="textarea"
        :rows="10"
        placeholder="请输入内容"
        v-model="dialogData.info">
    </el-input>

    <div slot="footer" class="dialog-footer">
<!--      <el-button @click="dialogData.dialogTableVisible = false">取 消</el-button>-->
      <el-button @click="copy">复制</el-button>
      <el-button @click="updateFeature">更新</el-button>
      <el-button @click="dialogData.dialogTableVisible = false">确 定</el-button>
    </div>
  </el-dialog>

</el-row>
</template>

<script>


import {
  reqDeleteFeatures, reqGetFeatureByFeatureId,
  reqGetFeatureListTree,
  reqUpdateFeatureByJson, reqUpdateFeatureList,
  reqUpdateFeaturesByFile
} from "@/api/feature";
import {requestGetData,  requestIsSuccess} from "@/api/request";
import {successMessage} from "@/utils/message";

export default {
  name: "FeatureSet",
  data() {
    return {
      props: {
        label: 'name',
        children: 'zones'
      },
      count: 1,
      data:[],
      isLoading:false,

      dialogData:{
        dialogTableVisible:false,
        title:"信息",
        info:""
      }
    };
  },
  methods: {
    copy(){
      navigator.clipboard.writeText(this.dialogData.info).then(res=>{
        this.successMessage("复制成功")
      }).catch(message=>{
        this.$notify({
          title: '复制失败',
          message: message,
          type: 'warning'
        })
      })

    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        reqGetFeatureListTree(node.level+1,"").then(result=>{
          if(requestIsSuccess(result)) {
            const firstLevelList = requestGetData(result);
            const config = []
            for (let i = 0; i < firstLevelList.length; i++) {
              config[i] = {name:firstLevelList[i].featuresName,data:firstLevelList[i]}
            }
            resolve(config);
          }
          else
            resolve();
        });
      }
      else {
        reqGetFeatureListTree(node.level+1, node.data.data.id).then(result => {
          if (requestIsSuccess(result)) {
            const featureList = requestGetData(result);
             const config = []
            for (let i = 0; i < featureList.length; i++) {
              const tempData = featureList[i]
              config[i]={
                name:tempData.name+'{id:'+tempData.id+',level='+ (node.level) +'}',
                data:tempData
              }
            }
            resolve(config)
          }
        })
      }

    },
    updateFeature(){
      var json = JSON.parse(this.dialogData.info);
      reqUpdateFeatureByJson(json).then(result=>{
        if (requestIsSuccess(result)){
          this.successMessage("更新成功")
        }
      }).catch(message=>{
        this.warningMessage(message);
      })
    },
    updateFeatureList(){
      this.isLoading=true
      reqUpdateFeatureList().then(result=>{
        if(requestIsSuccess(result)){
          this.successMessage("列表更新成功")
        }
        this.isLoading=false
      }).catch(message=>{
        this.isLoading=false
      })
    },
    renderContent(h, { node, data, store }) {
      if(node.level===1)
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>
          </span>);
      else
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
              <el-button size="mini" type="text" on-click={ () => this.getInfo(node, data) } >查询</el-button>
            </span>
          </span>);
    },
    append(node,data){
      console.log(node)
      console.log(data)
      var operatorId = '123';
      var formData = new FormData();
      var file;
      formData.append("file",file);  //上传一个files对象
      formData.append("operatorId", operatorId);//需要上传的多个参数

    },
    async remove(node, data) {
      const reqData = {level: node.level - 1, id: data.data.featureId || data.data.id};
      node.visible=false;
      this.isLoading=true;
      const result = await reqDeleteFeatures(reqData);
      if(requestIsSuccess(result)){
        this.successMessage("删除成功");
      }else{
        node.visible=true;
      }
      this.isLoading=false;
    },
    getInfo(node,data){
      this.isLoading=true;
      reqGetFeatureByFeatureId(data.data.featureId).then(result=>{
        if(requestIsSuccess(result)) {
          this.dialogData.info = JSON.stringify(requestGetData(result))
          this.dialogData.dialogTableVisible = true
          this.isLoading=false;
        }else{
          this.isLoading=false;
        }
      })
    },
    addJsonFile(event){
      var fromData = new FormData();
      fromData.append("file",event.target.files[0])
      this.isLoading=true;
      reqUpdateFeaturesByFile(fromData).then(result=>{
        if(requestIsSuccess(result)){
          successMessage("更新成功")
        }
        this.isLoading=false
      }).catch(message=>{
        this.$notify({
          title: '失败',
          message: message,
          type: 'warning'
        });
      })

    },
  }
}
</script>

<style>

</style>